<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title>Flex</title>
    <link rel="stylesheet" href="css/Flexible.css">
    <script src="js/Flexible.js"></script>
    <link rel="stylesheet" href="css/common.css?t=1528973665446">
    <style>
        .box {
            width: 100%;
            display: flex;
            /*align-items: flex-start;*/
        }

        .box1 .box-left {
            width: 2.333333rem;
            min-height: 2.333333rem;
            display: flex;
            justify-content: center;
            align-items: center;
            /*width: 100px;*/
        }

        .box1 .box-right {
            flex: 1;
            padding-left: 0.133333rem;
        }

        .img {
            width: 1.333333rem;
            height: 1.333333rem;
        }
    </style>
</head>
<body>
<div>
    <h3>flex:1</h3>
    <div class="box box1">
        <div class="box-left bg-purple">
            <div class="content-img img">
                <img src="./image/bg.png" alt="">
            </div>
        </div>
        <!--<div class="box-center bg-green">box-center</div>-->
        <div class="box-right bg-pink">
            <p>box-right</p>
            <p class="my-ellipsis">
                文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。
            </p>
            <p class="my-ellipsis-2">
                文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。文字超出。。。
            </p>
        </div>
    </div>
</div>
</body>
</html>